<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新建订单')"/>
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
    <th:block th:include="include :: summernote-css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>

    <script>

        //文件上传
        function uploadFile() {
            var formData = new FormData();
            if ($('#filePath')[0].files[0]==null) {
                return false;
            }
            file = $('#filePath')[0].files[0].name;
            formData.append('fileName', $("#filePath").val());
            formData.append('file', $('#filePath')[0].files[0]);
            $.ajax({
                url: ctx + "common/upload",
                type: 'post',
                cache: false,
                data: formData,
                async:false,    //同步
                processData: false,
                contentType: false,
                dataType: "json",
                success: function(result) {
                    fileName = result.fileName;
                    url = result.url;
                    if(result){
                        parent.$.modal.msgSuccess(result.msg);
                    }
                }
            });
        }
    </script>

    <script>
        var prefix = ctx + "sales/orders/create";

        function submitHandler() {
            var data = $("#form-order-add").serializeArray();
            var orderType = $.form.selectSelects("orderType");
            var deliver = $.form.selectSelects("deliver");
            data.push({"name": "orderType", "value":orderType});
            data.push({"name": "deliver", "value":deliver});
            $.operate.saveTab(prefix + "/create", data);
        }
    </script>

</head>
<body>
<div class="main-content">

    <form id="form-order-add" class="form-horizontal">



        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">项目名称：</label>
                    <div class="col-sm-8">
                        <input name="orderName" placeholder="请输入订单名称" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">订单编号：</label>
                    <div class="col-sm-8">
                        <input name="orderId" placeholder="请输入订单编号" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">订单类别：</label>
                    <div class="col-sm-8">
                        <select name="orderType" class="form-control" th:with="type=${@dict.getType('order_type')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <h4 class="form-header h4">客户信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">客户编号：</label>
                    <div class="col-sm-8">
                        <input name="customerId" placeholder="请输入客户编号" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">客户名称：</label>
                    <div class="col-sm-8">
                        <input name="customerName" placeholder="请输入客户名称" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">客户类型：</label>
                    <div class="col-sm-8">
                        <input name="customerType" placeholder="请输入客户类型" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">联系人：</label>
                    <div class="col-sm-8">
                        <input name="customerRelate" placeholder="请输入联系人" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">联系方式：</label>
                    <div class="col-sm-8">
                        <input name="customerTel" placeholder="请输入联系方式" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-xs-2 control-label">备注：</label>
                    <div class="col-xs-10">
                        <textarea name="customerInfo" maxlength="500" class="form-control" rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>






        <h4 class="form-header h4">项目概况</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">设计风格：</label>
                    <div class="col-sm-8">
                        <input name="orderStyle" placeholder="请输入设计风格" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">地理位置：</label>
                    <div class="col-sm-8">
                        <input name="orderAdd" placeholder="请输入地理位置" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">人文环境：</label>
                    <div class="col-sm-8">
                        <input name="orderEnv" placeholder="请输入人文环境" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">采光条件：</label>
                    <div class="col-sm-8">
                        <input name="orderLight" placeholder="请输入采光条件" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>




        <h4 class="form-header h4">订单信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">产品编号：</label>
                    <div class="col-sm-8">
                        <input name="productId" placeholder="请输入产品编号" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">产品名称：</label>
                    <div class="col-sm-8">
                        <input name="manageName" placeholder="请输入产品名称" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">数量：</label>
                    <div class="col-sm-8">
                        <input name="productNum" placeholder="请输入数量" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>


        <h4 class="form-header h4">其他信息</h4>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">项目总额：</label>
                    <div class="col-sm-8">
                        <input name="productSum" id="content" placeholder="请输入项目总额" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">大写：</label>
                    <div class="col-sm-8">
                        <span id="resl" style="color:red; margin-left:20px;"></span>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label">配送方式：</label>
                    <div class="col-xs-4">
                        <select name="deliver" class="form-control" th:with="type=${@dict.getType('order_type')}">
                            <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label">合同资料：</label>
                    <div class="col-sm-10">
                        <input id="filePath" name="contract" type="file" multiple class="file-upload form-control " />
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">销售人员名字：</label>
                    <div class="col-sm-8">
                        <input name="saleName" placeholder="销售人员名字" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">部门负责人名字：</label>
                    <div class="col-sm-8">
                        <input name="managerName" placeholder="部门负责人名字" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">日期：</label>
                    <div class="col-sm-8">
                        <input name="orderDate" placeholder="合同日期" class="form-control" type="text" maxlength="30" required>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-xs-2 control-label">备注：</label>
                    <div class="col-xs-10">
                        <textarea name="orderInfo" maxlength="500" class="form-control" rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>提 交</button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
    </div>
</div>

<script>

    var oContent = document.getElementById("content");
    var oChange = document.getElementById("change");
    var oResl = document.getElementById("resl");
    oResl.innerHTML="未知";
    //alert(oChange);

    oContent.onkeyup = function() {
        //alert("111")
        var n = oContent.value;
        //alert(n)
        // (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n))
        if (/^0|[A-Za-z]+$/.test(n))//正则表达式表示法  以双斜杆包围的正则表达式对象，如: /abc/
            // ^:匹配一个输入或一行的开头，/^a/匹配"an"，而不匹配"An"
            // $:匹配一个输入或一行的结尾，/a$/匹配"na"，而不匹配"nA"
            // \:转义字符
            // \d 匹配一个字数字符，/\d/ = /[0-9]/
            //[xyz] 字符集(character set)，匹配这个集合中的任一一个字符(或元字符)
            //x|y 匹配x或y
            // *:匹配前面元字符0次或多次，/ba*/将匹配b,ba,baa,baaa
            // ?:匹配前面元字符0次或1次，/ba*/将匹配b,ba
            // +:匹配前面元字符1次或多次，/ba*/将匹配ba,baa,baaa
            // text() 检测方法
        {
            alert("数据非法，请输入数字！");
            //return "数据非法";
        }
        else{
            //alert("合法")
            var unit = "千百拾亿千百拾万千百拾元角分厘毫", str = "";
            n += "0000";
            //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置 0,1...,如果没有就返回-1。
            var p = n.indexOf('.');
            if (p >= 0){
                //substring() 方法用于提取字符串中介于两个指定下标之间的字符 stringObject.substring(start,stop)
                //substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。stringObject.substr(start,length)

                n = n.substring(0, p) + n.substr(p+1, 4);  //将输入数字中的“.”去掉，如125.02，变成12502
                //alert(n);
            }
            //alert("n的值为："+n);
            unit = unit.substr(unit.length - n.length);
            //alert("unit截取到的值为："+unit);
            for (var i=0; i < n.length; i++)
                //charAt() 方法可返回指定位置,的字符. 注意：参数是位置，是下标，返回是“字符”。
                str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);  //逐个拼合数字转化的结果
        }
        //alert("初步得到的结果为："+str);
        //replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
        //语法： stringObject.replace(regexp/substr,replacement)  一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
        // 双斜杆之间为正则表达式  /零(千|百|拾|角)/
        //i 执行大小写不敏感的匹配
        //g 执行一个全局的匹配,简而言之,就是找到所有的匹配,而不是在找到第一个之后就停止了
        // 输入1： 得到的初始结果str为： 壹元零角零分
        //壹元零零分                     壹元零分
        // $1:表示正则表达式中：/零(万|亿|元)/g 的第一个括号部分(万|亿|元)，因此产生的效果是，将正则表达式：/零(万|亿|元)/g 所有的匹配内容，用$1:(万|亿|元) 的内容去替换。
        // 假如第一个是：零亿  将用  亿 去替换。 从而实现删除零的作用。 妙哉妙哉
        oResl.innerHTML = str.replace(/零(千|百|拾|角|分|厘)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/零毫$/g, "").replace(/元$/g, "元整");
        //return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整");

    }

</script>
<th:block th:include="include :: footer" />
<th:block th:include="include :: select2-js" />
</body>
</html>








<!--




<div class="wrapper wrapper-content animated fadeInRight ibox-content" >
    <form class="form-horizontal m" id="form-order-edit">
        <div class="col-md-6" >
            <div class="form-group">
                <label class="col-sm-3 control-label">项目名称：</label>
                <div class="col-sm-9">
                    <input type="text" name="" class="form-control" placeholder="请输入项目名称">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">项目编号：</label>
                <div class="col-sm-9">
                    <input type="text" name="" class="form-control" placeholder="请输入项目编号">
                </div>
            </div>


            还要连接数据库进行查询订单类别
            <div class="form-group">
                <label class="col-sm-3 control-label">订单类别：</label>
                <div class="col-sm-9">
                    <select name="sex" class="form-control" th:with="type=${@dict.getType('order_type')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
        </div>
    </form>

    <div>
        <div>
            <label class="col-sm-3 control-label">客户信息：</label>

            <input type="button" value="添加一行" name="" class="form-control" onclick="addOne1()"/>
        </div>
        <form>
            <table border="1" width="50%" id="table1">

                  <tr>
                <th>客户信息</th>
                <th>客户名称</th>
                <th>客户类型</th>
                <th>联系人</th>
                <th>联系方式</th>
                <th>客户属性</th>
                <th>备注</th>
                <th>操作</th>
                  </tr> 
                  </table>
        </form>
    </div>&nbsp;&nbsp;


    <div class="form-group">
        <label class="col-sm-3 control-label">项目概况：</label>
        <input type="button" value="添加一行" name="" class="form-control" onclick="addOne2()"/>
        <form>
            <table border="1" width="50%" id="table2">
                  <tr>
                <th>设计风格</th>
                <th>地理位置</th>
                <th>人文环境</th>
                <th>采光条件</th>
                <th>操作</th>
                  </tr> 
                  </table>
        </form>
    </div>&nbsp;&nbsp;


    <div class="form-group">
        <label class="col-sm-3 control-label">订单信息：</label>
        <input type="button" value="添加一行" name="" class="form-control" onclick="addOne3()"/>
        <form>
            <table border="1" width="50%" id="table3">
                  <tr>
                <th>订单编号</th>
                <th>产品名称</th>
                <th>数量</th>
                <th>单位</th>
                <th>单价</th>
                <th>总额</th>
                <th>备注</th>
                <th>操作</th>
                  </tr> 
                  </table>
        </form>
    </div>&nbsp;&nbsp;

    <form class="form-horizontal m" id="form-order-edit2">
        <div class="col-md-6">

            <body>

            <div class="form-group">
                <label class="col-sm-3 control-label">项目总额：</label>
                <div class="col-sm-9">
                    <input type="text" name="" class="form-control" id="content" placeholder="请输入姓名">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">大写：</label>
                <div class="col-sm-9">
                    <span id="resl" style="color:red; margin-left:20px;"></span>
                </div>
            </div>
            <script>

                var oContent = document.getElementById("content");
                var oChange = document.getElementById("change");
                var oResl = document.getElementById("resl");
                oResl.innerHTML="未知";
                //alert(oChange);

                oContent.onkeyup = function() {
                    //alert("111")
                    var n = oContent.value;
                    //alert(n)
                    // (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n))
                    if (/^0|[A-Za-z]+$/.test(n))//正则表达式表示法  以双斜杆包围的正则表达式对象，如: /abc/
                        // ^:匹配一个输入或一行的开头，/^a/匹配"an"，而不匹配"An"
                        // $:匹配一个输入或一行的结尾，/a$/匹配"na"，而不匹配"nA"
                        // \:转义字符
                        // \d 匹配一个字数字符，/\d/ = /[0-9]/
                        //[xyz] 字符集(character set)，匹配这个集合中的任一一个字符(或元字符)
                        //x|y 匹配x或y
                        // *:匹配前面元字符0次或多次，/ba*/将匹配b,ba,baa,baaa
                        // ?:匹配前面元字符0次或1次，/ba*/将匹配b,ba
                        // +:匹配前面元字符1次或多次，/ba*/将匹配ba,baa,baaa
                        // text() 检测方法
                    {
                        alert("数据非法，请输入数字！");
                        //return "数据非法";
                    }
                    else{
                        //alert("合法")
                        var unit = "千百拾亿千百拾万千百拾元角分厘毫", str = "";
                        n += "0000";
                        //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置 0,1...,如果没有就返回-1。
                        var p = n.indexOf('.');
                        if (p >= 0){
                            //substring() 方法用于提取字符串中介于两个指定下标之间的字符 stringObject.substring(start,stop)
                            //substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。stringObject.substr(start,length)

                            n = n.substring(0, p) + n.substr(p+1, 4);  //将输入数字中的“.”去掉，如125.02，变成12502
                            //alert(n);
                        }
                        //alert("n的值为："+n);
                        unit = unit.substr(unit.length - n.length);
                        //alert("unit截取到的值为："+unit);
                        for (var i=0; i < n.length; i++)
                            //charAt() 方法可返回指定位置,的字符. 注意：参数是位置，是下标，返回是“字符”。
                            str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);  //逐个拼合数字转化的结果
                    }
                    //alert("初步得到的结果为："+str);
                    //replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
                    //语法： stringObject.replace(regexp/substr,replacement)  一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
                    // 双斜杆之间为正则表达式  /零(千|百|拾|角)/
                    //i 执行大小写不敏感的匹配
                    //g 执行一个全局的匹配,简而言之,就是找到所有的匹配,而不是在找到第一个之后就停止了
                    // 输入1： 得到的初始结果str为： 壹元零角零分
                    //壹元零零分                     壹元零分
                    // $1:表示正则表达式中：/零(万|亿|元)/g 的第一个括号部分(万|亿|元)，因此产生的效果是，将正则表达式：/零(万|亿|元)/g 所有的匹配内容，用$1:(万|亿|元) 的内容去替换。
                    // 假如第一个是：零亿  将用  亿 去替换。 从而实现删除零的作用。 妙哉妙哉
                    oResl.innerHTML = str.replace(/零(千|百|拾|角|分|厘)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/零毫$/g, "").replace(/元$/g, "元整");
                    //return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整");

                }

            </script>
            </body>




            <div class="form-group">
                <label class="col-sm-3 control-label">配送方式：</label>
                <div class="col-sm-9">
                    <select name="sex" class="form-control" th:with="type=${@dict.getType('order_type')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">销售人员名字：</label>
                <div class="col-sm-9">
                    <input type="text" name="" class="form-control" placeholder="请输入专业">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">附件：</label>
                <div class="col-sm-10">
                    <input id="filePath" name="file" type="file" multiple class="file-upload form-control " />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">销售人员名字：</label>
                <div class="col-sm-9">
                    <input type="text" name="" class="form-control" placeholder="请输入专业">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">部门负责人名字：</label>
                <div class="col-sm-9">
                    <input type="text" name="" class="form-control" placeholder="请输入政治面貌">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">日期：</label>
                <div class="col-sm-9">
                    <div class="input-group date"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input type="text" class="time-input form-control" value="" placeholder="请选择出生年月">
                    </div>
                </div>
            </div>


        </div>
    </form>

</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: summernote-js"/>
<script type="text/javascript">
    var prefix = ctx + "system/notice";

    function submitHandler() {
        if ($.validate.form()) {
            var data = $("#form-user-add").serializeArray();
            var status = $("input[id='status']").is(':checked') == true ? 0 : 1;
            var roleIds = $.form.selectCheckeds("role");
            var postIds = $.form.selectSelects("post");
            data.push({"name": "status", "value": status});
            data.push({"name": "roleIds", "value": roleIds});
            data.push({"name": "postIds", "value": postIds});
            $.operate.saveTab(prefix + "/add", data);
        }
    }
</script>
</body>
</html>
-->